<template>
	<!-- 
		封装的一个键盘组件
		ShowPayment：为父组件传过来控制显示的布尔值
		overlayPopup：点击遮罩隐藏键盘回调事件，需要从父组件传过来事件通过emit发送回去
		<slot name="verifyBtn">：插槽，每个人的确认按钮跳转的页面不同，写在自己的父组件就可以
	 -->
	<van-popup :show="props.ShowPayment" round position="bottom" :style="{ height: '80%', backgroundColor: '#222324' }"
		@click-overlay="overlayPopup">
		<view class="orderTitle">
			<van-icon name="arrow-left" class="cross" @click="overlayPopup" />
			<h4>输入支付密码</h4>
		</view>
		<view class="keyInputPasswd">
			<van-field v-model="store.state.KeyValue" readonly clickable @touchstart.stop="showKeyBoard = true"
				type="password" />
			<text class="fontSize">忘记密码？</text>
		</view>
		<van-number-keyboard class="keyboard" v-model.trim="store.state.KeyValue" :show="showKeyBoard"
			@blur="OffKeyBoard" :random-key-order="true" maxlength="8">
			<template v-slot:extra-key>
				<view style="
            height: 100%;
            width: 100%;
            background-color: #4e47ff;
            text-align: center;
            line-height: 50px;
            color: #fff;
          ">
					<slot name="verifyBtn">
						<view @click="complete">确认</view>
					</slot>
				</view>
			</template>
			<template v-slot:title-left>
				<view style="margin-left: 10px">KOI安全键盘</view>
			</template>
			<template v-slot:delete>
				<view style="margin-left: 10px; color: white"></view>
			</template>
		</van-number-keyboard>
	</van-popup>
</template>

<script setup lang="ts">
	import { ref, defineEmits } from "vue";
	import { useStore } from 'vuex'
	const store = useStore()
	const emit = defineEmits(["closePaySuccess", "clickShowPaySuecc", "FlagA"]);
	const showKeyBoard = ref<boolean>(true); // 控制键盘的显示
	// 关闭键盘
	const OffKeyBoard = () => {
		showKeyBoard.value = false;
	};
	// 关闭弹出层
	const overlayPopup = () => {
		emit("closePaySuccess", { PopupState: false, PopupName: "ShowPayment" });
		emit('FlagA', false)
		// 可以更改为mutation方法
		store.state.KeyValue = "";
	};
	const props = defineProps({
		ShowPayment: Boolean, // 控制弹出层的显示
	});
</script>

<style lang="scss" scoped>
	::v-deep .van-number-keyboard__header {
		height: 84px !important;
		font-size: 30px;
	}

	::v-deep.van-key--delete {
		// 	transform: translateX(-496px);
		background: #8c8c8c;
		color: #fff;

		.van-key__delete-icon {
			color: #fff !important;
		}
	}

	::v-deep.van-key__wrapper {
		&:nth-last-child(3) {
			transform: translateX(496px);
		}

		&:nth-last-child(1) {
			transform: translateX(-496px);
		}
	}

	::v-deep.van-key {
		overflow: hidden;
	}

	::v-deep.van-key--active {
		background-color: #8c8c8c;
	}

	::v-deep .van-number-keyboard {
		height: 520px;
		border-radius: 0;
	}

	::v-deep .van-key__wrapper {
		height: 100px;
	}

	::v-deep .van-key {
		height: 90px;
		color: #404040;
	}

	::v-deep .van-cell {
		width: 480px;
		height: 88px;
		border-radius: 10px;
		background: #38393a;
		border: 1px solid gray;
	}

	::v-deep .van-cell__value {
		line-height: 65px;
	}

	::v-deep .van-field__control {
		color: #fff;
	}

	.orderTitle {
		position: relative;
		width: 91%;
		height: 97px;
		color: #fff;
		text-align: center;
		line-height: 97px;
		margin: 0 auto;
		font-size: 32px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);

		&>h4 {
			font-weight: normal;
		}

		.cross {
			position: absolute;
			top: 50%;
			left: 5%;
			transform: translateY(-50%);
		}
	}

	.keyInputPasswd {
		position: relative;
		top: 10%;
		left: 50%;
		width: 480px;
		height: 88px;
		transform: translate(-50%, 0);

		&>text {
			float: right;
			color: red;
			margin-top: 10px;
		}

		.fontSize {
			font-size: 28px;
		}
	}
</style>